<template>
  <view class="user-info-card">
    <view class="card-header">
      <text class="title">用户信息</text>
      <button @click="refreshUserInfo" class="refresh-btn" :disabled="loading">
        <uv-icon name="reload" :size="24" :color="loading ? '#ccc' : '#4facfe'"></uv-icon>
      </button>
    </view>
    
    <view class="card-content" v-if="userInfo">
      <view class="info-row">
        <view class="avatar-section">
          <image 
            class="avatar" 
            :src="userInfo.avatarUrl || '/static/images/user/avatar-default.png'" 
            mode="aspectFill"
          />
        </view>
        <view class="basic-info">
          <text class="nickname">{{ userInfo.nickname || '未设置昵称' }}</text>
          <text class="invite-code">邀请码：{{ userInfo.inviteCode || '无' }}</text>
        </view>
      </view>
      
      <view class="detail-info">
        <view class="info-item">
          <text class="label">性别</text>
          <text class="value">{{ userInfo.gender || '未设置' }}</text>
        </view>
        <view class="info-item">
          <text class="label">积分</text>
          <text class="value points">{{ userInfo.points || 0 }}</text>
        </view>
        <view class="info-item">
          <text class="label">注册时间</text>
          <text class="value">{{ formatDate(userInfo.createTime) }}</text>
        </view>
      </view>
    </view>
    
    <view class="card-content loading-state" v-else-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
    
    <view class="card-content error-state" v-else-if="error">
      <text class="error-text">{{ error }}</text>
      <button @click="refreshUserInfo" class="retry-btn">重试</button>
    </view>
    
    <view class="card-content empty-state" v-else>
      <text class="empty-text">暂无用户信息</text>
      <button @click="refreshUserInfo" class="load-btn">加载信息</button>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'UserInfoCard',
  data() {
    return {
      loading: false,
      error: null
    }
  },
  computed: {
    ...mapGetters('user', [
      'userMsgInfo'
    ]),
    userInfo() {
      return this.userMsgInfo
    }
  },
  mounted() {
    // 组件挂载时自动加载用户信息
    this.refreshUserInfo()
  },
  methods: {
    ...mapActions('user', [
      'getUserMsg'
    ]),
    async refreshUserInfo() {
      this.loading = true
      this.error = null
      
      try {
        await this.getUserMsg()
      } catch (error) {
        this.error = error.message || '获取用户信息失败'
      } finally {
        this.loading = false
      }
    },
    formatDate(dateString) {
      if (!dateString) return '未知'
      
      try {
        const date = new Date(dateString)
        return date.toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
      } catch (error) {
        return '日期格式错误'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user-info-card {
  background: #fff;
  border-radius: 16rpx;
  margin: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.refresh-btn {
  background: none;
  border: none;
  padding: 8rpx;
  border-radius: 8rpx;
  
  &:disabled {
    opacity: 0.5;
  }
}

.card-content {
  padding: 32rpx;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
}

.avatar-section {
  margin-right: 24rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid #f0f0f0;
}

.basic-info {
  flex: 1;
}

.nickname {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.invite-code {
  font-size: 24rpx;
  color: #666;
}

.detail-info {
  border-top: 1rpx solid #f0f0f0;
  padding-top: 24rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  
  &:not(:last-child) {
    border-bottom: 1rpx solid #f8f9fa;
  }
}

.label {
  font-size: 28rpx;
  color: #666;
}

.value {
  font-size: 28rpx;
  color: #333;
  
  &.points {
    color: #4facfe;
    font-weight: 600;
  }
}

.loading-state,
.error-state,
.empty-state {
  text-align: center;
  padding: 60rpx 32rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

.error-text {
  font-size: 28rpx;
  color: #e74c3c;
  margin-bottom: 24rpx;
  display: block;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 24rpx;
  display: block;
}

.retry-btn,
.load-btn {
  background: #4facfe;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 16rpx 32rpx;
  font-size: 26rpx;
}
</style>
